<template>
	<view class="content">
		<view class="top">
			<view class="shadow">
			</view>
			<view class="userInfo">
				<view class="userInfo-left">
					<view style="width: 128rpx;height: 128rpx;border-radius: 50%;overflow: hidden;border: 1rpx solid #FFC5492A;margin-right: 15rpx;">
						<image style="width: 128rpx;height: 128rpx;border-radius: 50%;" src="../../static/avatar.png"></image>
					</view>
					<text style="font-size: 36rpx;color: white;">名*字</text>
				</view>
				<view class="userInfo-right">
					<text>兼职天数：</text>
					<text>8</text>
				</view>
			</view>
		</view>
				
		<view class="mid">
			<view class="mid-first">
				<text>交易佣金</text>
				<view class="mid-first-right">
					<image src="../../static/bcu.png"></image>
					<text>提现</text>
				</view>
			</view>
			<view class="mid-second">
				<view style="border-right: 1rpx solid #0000001A;">
					<text>交易总佣金</text>
					<text>884,573.08</text>
				</view>
				<view style="border-right: 1rpx solid #0000001A;">
					<text>可用佣金</text>
					<text>9,889.00</text>
				</view>
				<view>
					<text>已提现佣金</text>
					<text>281.00</text>
				</view>
			</view>
			<view class="mid-second">
				<view style="border-right: 1rpx solid #0000001A;">
					<text>今日新增人数</text>
					<text>89</text>
				</view>
				<view style="border-right: 1rpx solid #0000001A;">
					<text>团队总人数</text>
					<text>884</text>
				</view>
				<view>
					<text>团队预计佣金</text>
					<text>4,573.08</text>
				</view>
			</view>
		</view>
		
		<view class="end">
			<view class="list-one">
				<view class="list-one-left">
					<image src="../../static/icon01.png"></image>
					<text>账变记录</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" src="../../static/Right.png"></image>
			</view>
			<view class="list-one">
				<view class="list-one-left">
					<image src="../../static/icon02.png"></image>
					<text>我的团队</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" src="../../static/Right.png"></image>
			</view>
			<view class="list-one">
				<view class="list-one-left">
					<image src="../../static/icon03.png"></image>
					<text>邀请好友</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" src="../../static/Right.png"></image>
			</view>
			<view class="list-one">
				<view class="list-one-left">
					<image src="../../static/icon04.png"></image>
					<text>立即下载FX8交易所</text>
				</view>
				<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" src="../../static/Right.png"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				midList:['账号注册','电话号码','电子邮箱'],
				selected:0
			}
		},
		onLoad() {

		},
		methods: {
			midTap(e){
				this.selected=e;
			}
		}
	}
</script>

<style>
	page{
		background: var(--color-fill-bg-light, #0C0C0C);
	}
	.top-main>view:nth-child(3){
		color: #FFC549;width: 92rpx;height: 64rpx;text-align: center;line-height: 64rpx;background: var(--color-fill-bg-grey, #1D1C21);
		border-radius: 32rpx;font-size: 30rpx;
	}
	.top-main>view:nth-child(2){
		color: white;font-size: 36rpx;
	}
	.top-main{
		width: 100%;;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 88rpx;height: 88rpx;
	}
	.shadow{
		width: 540rpx;height: 516rpx;background: radial-gradient(82.96% 86.82% at 32.96% 0%, #FFC549 0%, rgba(153, 118, 44, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
		position: absolute;top: -258rpx;left: -270rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.top{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.userInfo{
		width: 100%;
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.userInfo-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.userInfo-right{
		height: 80rpx;
		background: var(--color-fill-bg-input, #FFFFFF1A);
		border-radius: 360rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 35rpx;
	}
	.userInfo-right>text:first-child{
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.userInfo-right>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 600;
		color: #FFC549;
	}
	.mid{
		width: 90%;
		background-color: #FFC549;
		/* height: 324rpx; */
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}
	.mid-second{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #0000001A;
		height: 116rpx;
		/* line-height: 116rpx; */
	}
	.mid-second>view{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 33%;
	}
	.mid-second>view>text{
		margin-left: 20rpx;
	}
	.mid-second>view>text:first-child{
		font-size: 24rpx;
		color: #000000CC;
	}
	.mid-second>view>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 700;
		color: #000000;
	}
	.mid-first{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #0000001A;
		height: 92rpx;
		line-height: 92rpx;
	}
	.mid-first>text:first-child{
		font-size: 32rpx;
		font-weight: 600;
		color: #000000;
		margin-left: 20rpx;
	}
	.mid-first-right{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
	}
	.mid-first-right>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.mid-first-right>text{
		font-size: 28rpx;
		color: #000000;
	}
	.end{
		width: 90%;
		display: flex;
		flex-direction: column;
	}
	.list-one{
		margin-top: 35rpx;
		width: 100%;
		height: 120rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF1A;
		line-height: 120rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.list-one-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-one-left>image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 20rpx;
		margin-right: 15rpx;
	}
	.list-one-left>text{
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>
